<template>
  <span v-if="$attrs.hasOwnProperty('dictName')">{{statusName}}</span>
  <span v-else-if="$attrs.hasOwnProperty('siteId')">{{siteName}}</span>
  <span v-else-if="$attrs.hasOwnProperty('type') && $attrs.type == 'datetime'">{{datetime}}</span>
  <span v-else-if="$attrs.hasOwnProperty('type') && $attrs.type == 'city'">{{cityName}}</span>
  <span v-else-if="$attrs.hasOwnProperty('type') && $attrs.type == 'line'">{{lineName}}</span>
  <span v-else-if="$attrs.hasOwnProperty('type') && $attrs.type == 'money'" v-html="money"></span>
  <span v-else-if="$attrs.hasOwnProperty('type') && $attrs.type == 'tel'">
    <a v-if="value != placeholder" class="ad-tel" :href="'tel:'+ value" @click.stop>{{value}}</a>
    <span v-else>-</span>
  </span>
  <div class="ad-imgs" v-else-if="$attrs.hasOwnProperty('type') && $attrs.type == 'img'">
    <template v-if="imgList && imgList.length > 0">
      <el-image v-for="(img, index) in imgList" :key="index" :src="img" :preview-src-list="imgList" />
    </template>
    <div class="no-img" v-else style="color: #ababab">暂无照片</div>
  </div>
<!--  <el-tooltip v-else ref="value" placement="top" :disabled="!isShowOverflowTooltip" :class="{'ad-show-overflow-tooltip': isShowOverflowTooltip}" :content="String(value)"><span>{{value}}</span></el-tooltip>-->
  <span ref="value" v-else>{{value}}</span>
</template>

<script>
import { mapGetters } from 'vuex'
import { isString, isNumber, isObj, isArray } from '@/utils/type'
import { parseTime } from '@/utils'
import { parseStatus, parseCityCode } from '@/utils/code'
import { findComponentDataField } from '@/utils/find'

const placeholder = '-'

export default {
  data() {
    return {
      placeholder,
      dict: null,
      site: [],
      widthOverflow: false
    }
  },
  created() {
    if (this.$attrs.hasOwnProperty('dictName')) {
      this.dict = findComponentDataField(this, 'dict')
    }
    if (this.$attrs.hasOwnProperty('siteId')) {
      this.site = findComponentDataField(this, 'siteData')
    }
  },
  updated() {
    if (!this.widthOverflow) {
      setTimeout(() => {
        this.widthOverflow = this.detectWidth()
      })
    }
  },
  computed: {
    ...mapGetters(['allCityData']),
    isShowOverflowTooltip() {
      return this.widthOverflow && this.$attrs.hasOwnProperty('show-overflow-tooltip')
    },
    value() {
      const getLeafValue = (model, prop) => {
        const recursion = (curModel, prop, index) => {
          const isLeaf = prop.length - 1 == index // 是否是叶子属性
          let curProp = prop[index]
          let isArrProp = false // 是否是数组写法的参数
          // 检测是否有数组写法
          if (curProp && curProp.split('[').length > 1) {
            isArrProp = true
            curProp = curProp.split('[')[0]
          }
          const curValue = curModel[curProp]
          if (isObj(curValue)) {
            return recursion(curValue, prop, index+1)
          } else if (isArray(curValue)) {
            if (isLeaf) {
              return curValue
            }
            return recursion(curValue[0], prop, index+1)
          } else if (isNumber(curValue) || isString(curValue)) {
            if (curValue === "") return placeholder
            return curValue
          } else {
            return placeholder
          }
        }
        return recursion(model, prop, 0)
      }
      return getLeafValue(this.$attrs.model, this.$attrs.prop.split('.'))
      // let model = this.$attrs.model
      // this.$attrs.prop.split('.').forEach(prop => {
      //   if (prop == 'takeCarFee') {
      //     console.log('find',model, prop)
      //   }
      //   if (isString(model[prop]) || isNumber(model[prop])) {
      //     model = model[prop]
      //   }
      // })
      // if (isString(model)) {
      //   return model === '' ? '-' : model
      // } else if (isNumber(model)) {
      //   return model
      // } else {
      //   return '-'
      // }
    },
    statusName() {
      return parseStatus(this.dict, this.$attrs.dictName, this.value)
    },
    siteName() {
      if (this.value != placeholder) {
        return this.site.filter(site => site.id == this.value)[0].name
      } else {
        return this.value
      }
    },
    datetime() {
      if (this.value != placeholder) {
        return parseTime(this.value)
      } else {
        return this.value
      }
    },
    cityName() {
      if (this.value != placeholder) {
        return parseCityCode(this.allCityData, this.value)
      } else {
        return this.value
      }
    },
    lineName() {
      return this.value.split(',').map(code => parseCityCode(this.allCityData, code)).join(' - ')
    },
    money() {
      if (this.value != placeholder) {
        return `<span class="ad-fee">￥${this.value}</span>`
      } else {
        return this.value
      }
    },
    imgList() {
      if (this.value != placeholder) {
        return this.value
      } else {
        return null
      }
    }
  },
  methods: {
    detectWidth() {
      if (this.$refs.value) {
        // console.log(this.$refs.value.$el.parentNode.offsetWidth - this.$refs.value.$el.offsetWidth < 0)
        // console.log(this.$refs.value.$el, this.$refs.value.$el.parentNode.offsetWidth , this.$refs.value.$el.offsetWidth)
        return this.$refs.value.$el.parentNode.offsetWidth - this.$refs.value.$el.offsetWidth < 0
      } else {
        return false
      }
    }
  }
}
</script>

<style>
.ad-fee { color: #FE2E0D; }
.el-tooltip__popper { max-width: 50vw; }
</style>

<style lang="scss" scoped>
.ad-imgs { display: flex; flex-wrap: wrap;
  ::v-deep .el-image { display: block; margin: 0 10px 10px 0;  border-radius: 4px;
    & + & { margin-left: 8px; }
    .el-image__inner { width: 100px; height: 60px; }
  }
  .no-img { width: 100px; height: 60px;border-radius: 4px; background: #e8e8e8; text-align: center; line-height: 60px; font-size: 12px; }
}
.ad-show-overflow-tooltip { overflow: hidden; text-overflow: ellipsis; }
</style>